<template>
	<view class='login-wrap'>
		<form @submit="formSubmit">
			<view class="avatar-wrap">
<!-- 								<image class='userLogo' mode="scaleToFill" :src="src" @error="imageError"></image>
 -->
			</view>
			<view class="form-item">
				<uni-icons type="person-filled" size="30"></uni-icons>
				<input class="uni-input" v-model='form.username' name="input" placeholder="请输入账号" />
			</view>
			<view class="form-item">
				<uni-icons type="locked-filled" size="30"></uni-icons>
				<input class="uni-input" v-model='form.password' password name="input" placeholder="请输入密码" />
			</view>
			<view class="uni-btn-v">
				<button form-type="submit" class='submitBtn'>登录</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户头像
				avatarSrc: {},
				// 当前用户ID
				userID: null,
				form: {
					username: 'moon',
					password: '123456'
				},
				src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'


			}
		},
		methods: {
			formSubmit() {
				let {
					username,
					password
				} = this.form
				uni.request({
					url: getApp().globalData.BaseUrl + '/users/login',
					method: 'POST',
					data: {
						username,
						password
					},
					success: (res) => {
						let {
							statusCode,
							errMsg,
							data
						} = res
						if (statusCode !== 200) {
							uni.showToast({
								title: errMsg,
								duration: 2000
							});
							return false
						}
						this.userID = data.id;
						// 创建ws连接
						this.createWS();
						// 存储当前用户信息
						uni.setStorage({
							key: 'userInfo',
							data: data,
							success: function() {
								// 登录成功跳转到聊天界面
								uni.navigateTo({
									url: '/pages/linkMen/linkMen',
									// 配置窗口动画
									animationType: 'pop-in',
									animationDuration: 200
								});
								// uni.navigateTo({
								// 	url:'/pages/selfConfig/selfConfig'
								// })
							}
						});

					},
					fail: (err) => {
						console.error(err);
					},
				});

			},
			// 创建websocket连接
			createWS() {
				uni.connectSocket({
					url: 'ws://localhost:8888'
				});
				uni.onSocketOpen((res) => {
					// 每个用户上线之后，当前为私聊模式
					// 所以连接成功后向服务端发送userID/toUserID
					let data = {
						flag: 'init_connection',
						userID: this.userID,
						//toUserID: this.linkman.id
					}
					uni.sendSocketMessage({
						data: JSON.stringify(data)
					});
					// 实时消息监听
					uni.onSocketMessage((res) => {
						let data = JSON.parse(res.data)
						// 处理实时聊天消息：res为object类型
						let {
							flag,
							msg,
							userID,
							toUserID
						} = data
						uni.$emit('onWSMessage', data)
					});
				});
				uni.onSocketError((res) => {
					console.log('WebSocket连接打开失败，请检查！');
				});

			},
			imageError() {},
		},
		onLoad() {
			console.log('BaseUrl----', getApp().globalData.BaseUrl)

		},
	}
</script>

<style lang="less" scoped>
	.login-wrap {
		height: 100vh;
		box-sizing: border-box;
		background-image: url('@/static/chart/login-bg.jpg');
		background-size: 100% 100%;
		padding: 38% 12% 0 12%;

		.avatar-wrap {
			margin-bottom: 100rpx;
			@size: 200rpx;
			::v-deep .uni-file-picker__container{
				display: flex;
				justify-content: center;
			}
			.userLogo {
				width: @size;
				height: @size;
				border-radius: 24%;
			}

		}
	}

	.form-item {
		position: relative;

		.avatar {
			margin-bottom: 100rpx;
		}

		.uni-input {
			border-bottom: 1px solid #eee;
			margin-bottom: 60rpx;
			background-color: transparent;
			color: #E5E5E5;

			::v-deep .uni-input-wrapper {
				padding-left: 10%;
			}

			// .uni-input-form, .uni-input-wrapper
		}

		.uni-icons {
			position: absolute;
			top: 50%;
			transform: translateY(-57%);

			&::before {
				color: #eeeeeede;

			}
		}
	}

	.submitBtn {
		@h: 112rpx;
		background-color: #4ea234;
		border-radius: 10rpx;
		background-color: #4ea234;
		border-radius: 66rpx;
		height: @h;
		line-height: @h;
		color: #fff;
	}
</style>
